<template>
    <div class="TestOne">
        <!--      头-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">一星花艺师测试</p>
        </Top>
        <div class="main" v-loading="loading" v-if="exam.length>0">
            <cube-scroll>
                <!--进度条-->
                <div class="progress-wrapper">
                    <el-progress :percentage="((this.currentIndex+1)/this.exam.length)*100" :show-text="false" color="#de6940"></el-progress>
                </div>
                <!--剩余时间-->
                <div class="rest-wrapper">
                    <span>剩余10:58</span>                
                    <span>当前进度 {{currentIndex+1}}/{{exam.length}}</span>                
                </div>
                <!--试题盒子-->
                <div class="paper-wrapper">
                    <p>{{currentIndex+1}}.{{exam[currentIndex].exam_title}}<span class="type-tag">{{exam[currentIndex].exam_type===1?'单选':'多选'}}</span></p>
                    <div class="img-wrapper">
                        <img class="imgFullx" :src="exam[currentIndex].exam_img" alt="">
                    </div>
                    <div class="tips">({{exam[currentIndex].exam_type===1?'请选择您认为正确的一个答案':'请选择您认为正确的一个或多个答案'}})</div>
                    <ul class="answer-list">
                        <li v-for="(item, index) in exam[currentIndex].answer" :key='index'><el-radio v-model="exam[currentIndex].exam_check" :label="item.answer_id">{{item.answer_nab}}.{{item.answer_title}}-{{item.answer_id}}</el-radio></li>
                    </ul>
                </div>
            </cube-scroll>
        </div>
        <!--底部-->
        <div class="test-foot" >
            <span @click="prev()">上一题</span>
            <b @click="next()" v-if="currentIndex<exam.length-1">下一题</b>
            <b @click="postPaper()" v-else>提交</b>
        </div>
        <!--测试弹窗-->
        <div class="mask" v-if="shareWindowShow">
            <div class="share-content-window">
                <div class="close" @click="$router.replace('/bag/level')">
                    <img class="imgFull" src="../../assets/exam/close.png" alt="" />
                </div>
                <!--成功弹窗-->
                <div v-if="isPass">
                    <div class="type-wrap success" >
                        <h3>{{msg}}</h3>
                        <button @click="$router.replace('/bag/level')">继续晋级</button>
                    </div>
                    <!--分享列表-->
                    <div class="share-wrapper" v-if="inApp() || isWeiXin()">
                        <!-- <fieldset class="noMore">
                            <legend align="center" class="noMoreText">分享</legend>
                        </fieldset> -->
                        <p class='field-set'>分享至</p>
                        <!--列表-->
                        <ul class="share-list">
                            <li @click="shareLevel(0)">
                                <img src="../../assets/exam/tk_weixin.png" alt="">
                                <p>微信好友</p>
                            </li>
                            <li @click="shareLevel(1)">
                                <img src="../../assets/exam/tk_friend.png" alt="">
                                <p>朋友圈</p>
                            </li>
                            <li @click="shareLevel(2)" v-if="inApp()">
                                <img src="../../assets/exam/tk_weibo.png" alt="">
                                <p>微博</p>
                            </li>
                            <li @click="shareLevel(3)">
                                <img src="../../assets/exam/tk_QQzone.png" alt="">
                                <p>QQ空间</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--失败弹窗-->
                <div class="type-wrap" v-else>
                    <h3>您没有通过测试，请明天再试~</h3>
                    <button @click="$router.replace('/bag/level')">返回</button>
                </div>
            </div>
        </div>
        <!--微信分享引导图-->
        <div class="mask" @click="wxShareShow=false" v-if="wxShareShow">
            <img class="share-wx" src="../../assets/exam/share-wx.png" alt="" />
        </div>
    </div>
</template>

<script>
    import Top from '@/components/smallCom/Top'
    export default {
        name: 'TestOne',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
                loading:false,//加载动画
                shareWindowShow:false,//分享弹窗
                wxShareShow:false,//微信引导图
                isPass:false,//是否通过测试
                percentage:0,//试题进度
                exam:[],//试题列表
                currentIndex:0,//当前第几题
                msg:'恭喜您通过一星花艺师测试',//
            }
        },
        created(){
            this.loading = true;
            this.Posthttp('/?method=flower.exam.examList',{member_id:this.getMemberId(),type:1},(res)=>{
                this.loading = false;
                this.exam = JSON.parse(res.bodyText).data.exam;
                this.exam.forEach((value,index,array)=>{
                    this.$set(value,'exam_check','')
                })
            })
        },
        methods:{
            /*分享*/
            shareLevel(index){
                if(this.deviceType() === 1){//安卓 shareHy(String title,String content,String url,String imageUrl,int type) type=0表示分享花艺师测评，1-表示分享课程
                    window.hy.shareHy('我的花艺师等级',this.msg,window.location.href,'http://www.huawa.com/static/st/images/huawa/log1.png',index)
                }else if(this.deviceType() === 2){//IOS
                    let data = {
                        title:'我的花艺师等级',
                        contentL:this.msg,
                        url:window.location.href,
                        imageUrl:'http://www.huawa.com/static/st/images/huawa/log1.png',
                        type:index
                    }
                    window.webkit.messageHandlers.shareHy.postMessage(JSON.stringify(data))  
                }else{//WAP-wechat
                    if(this.isWeiXin()){
                        this.wxShareShow = true;
                    }
                }
            },
            /*上一题*/
            prev(){
                if(this.currentIndex<1)return;
                this.currentIndex--
            },
            /*下一题*/
            next(){
                if((this.exam.length-2)<this.currentIndex)return;
                if(!this.exam[this.currentIndex].exam_check)return;
                this.currentIndex++
            },
            /*提交试卷*/
            postPaper(){
                /*console.dir(this.exam)
                return*/
                if(!this.exam[this.currentIndex].exam_check)return;
                this.$confirm('是否提交试卷?', '提交确认', {
                    confirmButtonText: '是的',
                    cancelButtonText: '再改改',
                    type: 'warning'
                }).then(() => {
                    let arr = []
                    this.exam.forEach((value,index)=>{
                        value.answer.forEach(function(value2,index2){
                            if(value2.answer_id === value.exam_check){
                                arr.push({
                                    answer_id:value.exam_check,
                                    exam_id:value.exam_id,
                                    answer_nab:value2.answer_nab,
                                    exam_type:value.exam_type
                                })
                            }
                        })
                    })
                    this.loading = true;
                    this.Posthttp('/?method=flower.teacher.exam',{member_id:this.getMemberId(),answer:arr},(res)=>{
                        this.loading = false
                        if(JSON.parse(res.bodyText).status === 0){//未通过
                            this.shareWindowShow = true
                            this.isPass = false
                        }else if(JSON.parse(res.bodyText).status === 1){//通过
                            this.shareWindowShow = true
                            this.isPass = true
                        }
                    });
                }).catch(() => {
                    //do nothing
                })
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    .TestOne{
        .main{
            bottom: .8rem;
        }
        /*微信分享引导图*/
        .share-wx{
            width: 100%;
            position: absolute;
            top: 20%;
            left: 0;
        }
        .progress-wrapper{
            padding: .3rem .2rem .14rem;
        }
        .rest-wrapper{
            display: flex;
            justify-content: space-between;
            color: #666666;
            padding: 0 .2rem;
        }
        .paper-wrapper{
            width: 100%;
            margin-top: .3rem;
            position: relative;
            padding: .3rem .2rem 0;
            border-top: 1px solid #eee;
            &>p{
                color: #333;
                font-size: .26rem;
                line-height: .5rem;
                .type-tag{
                    background-color: #eb5b29;
                    color: #fff;
                    padding: .04rem .12rem;
                    border-radius: .04rem;
                }
            }
            .img-wrapper{
                width: 100%;
                margin: .3rem auto .26rem;
            }
            .tips{
                font-size: .26rem;
                color: #666666;
            }
            .answer-list{
                margin-top: .34rem;
                li{
                    margin-bottom: .4rem; 
                }
            }
            .el-radio__inner{
                width: .34rem;
                height: .34rem;
            }
            .el-radio{
                white-space: normal;
                line-height: .4rem;
            }
        }
        .test-foot{
            width: 100%;
            height: .8rem;
            line-height: .8rem;
            display: flex;
            position: fixed;
            left: 0;
            bottom: 0;
            span,b{
                flex: 1;
                text-align: center;
                font-size: .3rem;
            }
            span{
                color: #eb5b29;
                border-top: 1px solid #eb5b29;
            }
            b{
                background-color: #eb5b29;
                color: #fff;
            }
        }
    }
</style>
